<template>
    <div class="control list_container flex both-100">
        <Breadcrumb :title="pageTitle" />
        <div class="content_container">
            <!-- 搜索 -->
            <el-form ref="searchForm" :inline="true" :model="searchMap" class="search_wrapper flex-space-between">
                <div class="search ">
                    <el-form-item prop="alarmStrategyName" size="small">
                        <el-input v-model="searchMap.alarmStrategyName" placeholder="报警策略名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="plateNo" size="small">
                        <el-select v-model="searchMap.deviceTypeId" placeholder="请选择报警归属设备">
                            <el-option v-for="dict in dataDevicTypeList" :key="dict.deviceTypeId"
                                :label="dict.deviceTypeName" :value="dict.deviceTypeId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="flex">
                        <el-button @click="handleSearch()" class="btn_primary el-icon-search">查询</el-button>
                        <el-button @click="handleReset()" class="btn_cancel el-icon-refresh-left">重置</el-button>
                    </el-form-item>
                </div>
                <div class="edit">
                    <el-form-item class="flex">
                        <el-button @click="handleAdd()" class="btn_primary el-icon-plus">新增</el-button>
                    </el-form-item>
                </div>
            </el-form>
            <div class="table_container">
                <!-- 表格 -->
                <el-table :data="dataList" v-loading="loading" stripe class="per_table" style="width: 100%"
                    :height="winTableH">
                    <el-table-column type="index" label="序号" align="center"></el-table-column>
                    <el-table-column prop="alarmStrategyName" label="报警策略名称"></el-table-column>
                    <el-table-column prop="deviceTypeId" label="报警归属设备" align="center">
                        <template slot-scope="scope">
                            {{ dataDevicTypeFilter(dataDevicTypeList, scope.row.deviceTypeId, 'deviceTypeId',
                                'deviceTypeName') }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="alarmStrategyDescribe" label="报警策略描述" align="center"></el-table-column>
                    <el-table-column prop="enableStatus" label="状态" align="center">
                        <template slot-scope="scope">
                            <template v-if="scope.row.enableStatus === '1'">启用</template>
                            <template v-else>未启用</template>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="280">
                        <template slot-scope="scope">
                            <div>
                                <span type="text" class="tag_primary" size="small"
                                    @click="handleSelect(scope.row)">查看</span>
                                <span type="text" class="marginl-10 tag_primary" size="small"
                                    @click="handleEdit(scope.row)">编辑</span>
                                <span type="text" class="marginl-10 tag_warning" size="small"
                                    @click="handleDelete(scope.row)">删除</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <Pagination v-show="total > 0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize"
                @change="getList"></Pagination>
        </div>
        <!-- 弹窗 详情 -->
        <el-dialog class="m_dialog" :title="title" :visible.sync="dialogVisible" width="800" append-to-body
            :before-close="() => { dialogVisible = false }" :close-on-click-modal="false">
            <div class="content">
                <el-form ref="form" :model="formModel" size="small" :rules="formRules" label-width="80px"
                    :disabled="title === '报警策略详情'">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-button class="btn_primary" style="margin-bottom: 20px;">报警策略设置</el-button></el-button>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="报警策略名称" label-width="140px" prop="alarmStrategyName">
                                <el-input v-model="formModel.alarmStrategyName" placeholder="请输入报警策略名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="报警策略描述" label-width="140px" prop="alarmStrategyDescribe">
                                <el-input v-model="formModel.alarmStrategyDescribe" type="textarea"
                                    placeholder="请输入报警策略描述"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-button class="btn_primary" style="margin-bottom: 20px;">报警配置</el-button>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="报警归属设备" label-width="140px" prop="deviceTypeId">
                                <el-select v-model="formModel.deviceTypeId" placeholder="请选择">
                                    <el-option v-for="dict in dataDevicTypeList" :key="dict.deviceTypeId"
                                        :label="dict.deviceTypeName" :value="dict.deviceTypeId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="报警分类" label-width="140px" prop="alarmEventTypeId">
                                <el-select filterable v-model="formModel.alarmEventTypeId" placeholder="请选择">
                                    <el-option v-for="dict in dataalarmEventTypeList" :key="dict.alarmEventTypeId"
                                        :label="dict.eventName" :value="dict.alarmEventTypeId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="报警等级" label-width="140px" prop="alarmUrgency">
                                <el-select v-model="formModel.alarmUrgency" placeholder="请选择">
                                    <el-option v-for="dict in dict.type.alarm_grade" :key="dict.value" :label="dict.label"
                                        :value="dict.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="是否弹窗" label-width="140px" prop="popWindowStatus">
                                <el-select v-model="formModel.popWindowStatus" placeholder="请选择" style="width: 100%;">
                                    <el-option label="是" value="1"></el-option>
                                    <el-option label="否" value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="下发控制命令" label-width="140px" prop="controlCmd">
                                <el-select v-model="formModel.controlCmd" placeholder="请选择">
                                    <el-option v-for="dict in dict.type.lssue_control_commands" :key="dict.value"
                                        :label="dict.label" :value="dict.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-button class="btn_primary"
                                style="margin-bottom: 20px;">上级平台是否处理下级报警信息</el-button></el-button></el-button>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="是否处理下级报警信息" label-width="140px" prop="alarmNoticeRuleStatus">
                                <el-select v-model="formModel.alarmNoticeRuleStatus" placeholder="请选择" style="width: 100%;">
                                    <el-option label="是" value="1"></el-option>
                                    <el-option label="否" value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-button class="btn_primary" style="margin-bottom: 20px;">用户组配置</el-button>
                            <el-col :span="12">
                                <el-form-item label="用户组配置" label-width="140px" prop="labelId">
                                    <el-select v-model="formModel.labelId" placeholder="请选择">
                                        <el-option v-for="dict in dataLabelList" :key="dict.labelId" :label="dict.labelName"
                                            :value="dict.labelId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="多级推送规则" label-width="140px" prop="alarmNoticeRuleIds">
                                    <el-select v-model="formModel.alarmNoticeRuleIds" multiple placeholder="请选择">
                                        <el-option v-for="dict in dataAlarmNoticeRuleList" :key="dict.alarmNoticeRuleId"
                                            :label="dict.noticeRuleName" :value="dict.alarmNoticeRuleId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-button class="btn_primary" style="margin-bottom: 20px;">通知信息模版</el-button>
                            <el-col :span="12">
                                <el-form-item label="分级推送预案设定" label-width="140px" prop="emergencyPlanType">
                                    <el-select v-model="formModel.emergencyPlanType" placeholder="请选择">
                                        <el-option v-for="dict in dict.type.hierarchical_push_plan_setting"
                                            :key="dict.value" :label="dict.label" :value="dict.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="通知信息模版" label-width="140px" prop="messageTemplateId">
                                    <el-select v-model="formModel.messageTemplateId" placeholder="请选择">
                                        <el-option v-for="dict in datamessageTemplateList" :key="dict.messageTemplateId"
                                            :label="dict.messageTemplateSubject" :value="dict.messageTemplateId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-button class="btn_primary" style="margin-bottom: 20px;">推送方式</el-button>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="推送方式" label-width="140px" prop="pushWay">
                                <el-select v-model="formModel.pushWay" multiple placeholder="请选择">
                                    <el-option v-for="dict in dict.type.push_method" :key="dict.value" :label="dict.label"
                                        :value="dict.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="状态" label-width="140px" prop="enableStatus">
                                <el-select v-model="formModel.enableStatus" placeholder="请选择" style="width: 100%;">
                                    <el-option label="启用" value="1"></el-option>
                                    <el-option label="未启用" value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="() => { dialogVisible = false }" class="btn_cancel">取 消</el-button>
                <el-button type="primary" @click="submitFrom()" class="btn_primary">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="title" :visible.sync="dialogVisibleInfo" width="800" append-to-body>
            <custom-title title="详细信息" />
            <BaseDescriptions :descConfig="descConfig" :descConfigItem="descConfigItem" :descModel="formModel">
                <template #deviceTypeId>
                    {{ dataDevicTypeFilter(dataDevicTypeList, formModel.deviceTypeId, 'deviceTypeId', 'deviceTypeName') }}
                </template>
                <template #alarmEventTypeId>
                    {{ dataDevicTypeFilter(dataalarmEventTypeList, formModel.alarmEventTypeId, 'alarmEventTypeId',
                        'eventName') }}
                </template>
                <template #alarmUrgency>
                    <dict-tag :options="dict.type.alarm_grade" :value="formModel.alarmUrgency" />
                </template>
                <template #popWindowStatus>
                    {{ formModel.popWindowStatus === '1' ? '是' : '否' }}
                </template>
                <template #controlCmd>
                    <dict-tag :options="dict.type.lssue_control_commands" :value="formModel.controlCmd" />
                </template>
                <template #alarmNoticeRuleStatus>
                    {{ formModel.alarmNoticeRuleStatus === '1' ? '是' : '否' }}
                </template>
                <template #labelId>
                    {{ dataDevicTypeFilter(dataLabelList, formModel.labelId, 'labelId', 'labelName') }}
                </template>
                <template #alarmNoticeRuleIds>
                    {{ getListItemNames(dataAlarmNoticeRuleList, formModel.alarmNoticeRuleIds, 'alarmNoticeRuleId',
                        'noticeRuleName') }}
                </template>
                <template #emergencyPlanType>
                    <dict-tag :options="dict.type.hierarchical_push_plan_setting" :value="formModel.emergencyPlanType" />
                </template>
                <template #messageTemplateId>
                    {{ dataDevicTypeFilter(datamessageTemplateList, formModel.messageTemplateId, 'messageTemplateId',
                        'messageTemplateSubject') }}
                </template>
                <template #pushWay>
                    <dict-tag :options="dict.type.push_method" :value="formModel.pushWay" />
                </template>
                <template #enableStatus>
                    {{ formModel.enableStatus === '1' ? '启用' : '未启用' }}
                </template>

            </BaseDescriptions>
        </el-dialog>
    </div>
</template>
<script>
import { alarmNoticeStrategy, alarmNoticeStrategyList, labelList, alarmNoticeRuleList, messageTemplateList, devicTypeList, alarmEventTypeList } from '../api/index'
import BaseDescriptions from '@/components/PageContent/BaseDescriptions.vue';
export default {
    dicts: ['alarm_attribution_device', 'alarm_types', 'alarm_grade', 'lssue_control_commands', 'push_method', 'hierarchical_push_plan_setting'],
    components: {
        BaseDescriptions,
    },
    data() {
        return {
            pageTitle: '报警策略管理',
            loading: false,
            total: 0,
            title: '报警策略详情',
            dialogVisible: false,
            dialogVisibleInfo: false,
            searchMap: {
                pageNum: 1,
                pageSize: 10,
            },
            dataList: [],
            dataLabelList: [],
            dataAlarmNoticeRuleList: [],
            datamessageTemplateList: [],
            dataDevicTypeList: [],
            dataalarmEventTypeList: [],
            // 提交表单数据
            formModel: {},
            reqType: 'post',
            formRules: {},
            descConfig: {
                size: 'medium',
                column: '2',
            },
            descConfigItem: [
                {
                    fieIdName: 'alarmStrategyName',
                    label: '报警策略名称',
                    span: 2,
                },
                {
                    fieIdName: 'alarmStrategyDescribe',
                    label: '报警策略描述',
                    span: 2,
                },
                {
                    fieIdName: 'deviceTypeId',
                    label: '报警归属设备',
                    span: 2,
                    slotName: 'deviceTypeId',
                },
                {
                    fieIdName: 'alarmEventTypeId',
                    label: '报警分类',
                    span: 2,
                    slotName: 'alarmEventTypeId',
                },
                {
                    fieIdName: 'alarmUrgencyb',
                    label: '报警等级',
                    span: 2,
                    slotName: 'alarmUrgency',
                },
                {
                    fieIdName: 'popWindowStatus',
                    label: '是否弹窗',
                    span: 2,
                    slotName: 'popWindowStatus',
                },
                {
                    fieIdName: 'controlCmd',
                    label: '下发控制命令',
                    span: 2,
                    slotName: 'controlCmd',
                },
                {
                    fieIdName: 'alarmNoticeRuleStatus',
                    label: '是否处理下级报警信息',
                    span: 2,
                    slotName: 'alarmNoticeRuleStatus',
                },
                {
                    fieIdName: 'labelId',
                    label: '用户组配置',
                    span: 2,
                    slotName: 'labelId',
                },
                {
                    fieIdName: 'alarmNoticeRuleIds',
                    label: '多级推送规则',
                    span: 2,
                    slotName: 'alarmNoticeRuleIds',
                },
                {
                    fieIdName: 'emergencyPlanType',
                    label: '分级推送预案设定',
                    span: 2,
                    slotName: 'emergencyPlanType',
                },
                {
                    fieIdName: 'messageTemplateId',
                    label: '通知信息模版',
                    span: 2,
                    slotName: 'messageTemplateId',
                },
                {
                    fieIdName: 'pushWay',
                    label: '推送方式',
                    span: 2,
                    slotName: 'pushWay',
                },
                {
                    fieIdName: 'enableStatus',
                    label: '状态',
                    span: 2,
                    slotName: 'enableStatus',
                },
            ],
        }
    },
    methods: {
        submitFrom() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    alarmNoticeStrategy(this.formModel, this.reqType).then(res => {
                        if (200 === res.code) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                            });
                            this.dialogVisible = false
                            this.formModel = {}
                            this.getList()
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        //删除
        handleDelete(row) {
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                alarmNoticeStrategy([row.alarmNoticeStrategyId], 'delete').then(res => {
                    if (200 === res.code) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getList()
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 查询
        handleSearch() {
            this.getList()
        },
        // 重置
        handleReset() {
            this.searchMap = {
                pageNum: 1,
                pageSize: 10,
            }
            this.getList()
        },
        //新增打开
        handleAdd() {
            this.title = "新增报警策略"
            this.reqType = 'post'
            this.formModel = {}
            this.dialogVisible = true;
        },
        //编辑
        handleEdit(row) {
            this.title = "编辑报警策略"
            this.formModel = row
            console.log(row)
            this.reqType = 'put'
            this.dialogVisible = true;
        },
        //查看
        handleSelect(row) {
            this.title = "报警策略详情"
            this.reqType = 'select'
            this.formModel = row
            this.dialogVisibleInfo = true;
        },
        // 页面数据
        async getList() {
            const { code, rows, total } = await alarmNoticeStrategyList(this.searchMap)
            if (code === 200) {
                this.loading = false
                this.dataList = rows
                this.total = total
            }
        },
        // label数据
        async getLabelList() {
            const { code, rows } = await labelList({ pageNum: 1, pageSize: 1000 })
            if (code === 200) {
                this.dataLabelList = rows
            }
        },
        // 多级通知规则
        async getAlarmNoticeRuleList() {
            const { code, rows } = await alarmNoticeRuleList({ pageNum: 1, pageSize: 1000 })
            if (code === 200) {
                this.dataAlarmNoticeRuleList = rows
            }
        },
        // 报警通知信息模板列表
        async getmessageTemplateList() {
            const { code, rows } = await messageTemplateList({ pageNum: 1, pageSize: 1000 })
            if (code === 200) {
                this.datamessageTemplateList = rows
            }
        },
        //设备
        async getdevicTypeList() {
            const { code, data } = await devicTypeList({ treeLevel: 2 })
            if (code === 200) {
                this.dataDevicTypeList = data
            }
        },
        //报警
        async getalarmEventTypeList() {
            const { code, rows } = await alarmEventTypeList({ pageNum: 1, pageSize: 1000 })
            if (code === 200) {
                console.log(rows)
                const uniqueMap = new Map();
                rows.forEach(item => {
                    if (!uniqueMap.has(item.eventName)) {
                        uniqueMap.set(item.eventName, item);
                    }
                });
                const uniqueData = Array.from(uniqueMap.values());
                this.dataalarmEventTypeList = uniqueData
            }
        },
        dataDevicTypeFilter(list, id, idKey, nameKey) {
            return list.find(item => item[idKey] === id)?.[nameKey];
        },
        getListItemNames(list, ids, idKey, nameKey) {
            if (!ids) {
                return ''
            } else {
                return ids
                    .map(id => list.find(item => item[idKey] === id)?.[nameKey])
                    .filter(Boolean)
                    .join(', ');
            }
        },

    },
    mounted() {
        this.getList()
        this.getLabelList()
        this.getAlarmNoticeRuleList()
        this.getmessageTemplateList()
        this.getdevicTypeList()
        this.getalarmEventTypeList()
    },
}
</script>
<style lang="less">
.control {
    .el-table__cell {
        .cell {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}
</style>
<style lang="less" scoped>
.list_container {
    flex-direction: column;
    background: url("@/assets/images/home/content.png") no-repeat;
    background-size: cover;

    .content_container {
        padding: 15px 20px;
        overflow-y: scroll;
    }

    .table_container {
        margin-bottom: 25px;
    }

    .pagination_container {
        display: flex;
        justify-content: space-between;
        height: 32px;
    }
}
</style>